<template>
  <div class="w-240px max-w-240px min-w-240px h-full min-h-full flex flex-col bg-white">
    <div class="mt-40px mb-24px ml-20px text-16px text-[#C2C5C5]">动态</div>
    <div
      class="w-full h-56px flex flex-row items-center px-20px box-border cursor-pointer hover:bg-#f3f3f3 transition-all"
      v-for="(item, index) in tagList"
      :key="index"
      :class="{ '!bg-#6b39ff': item.value === type }"
      @click="handleClick(item.value)"
    >
      <img
        :src="handleImage(item.value === type ? item.iconName + '-s' : item.iconName)"
        alt="hot"
        class="w-18px h-18px"
      />
      <h2 class="ml-12px text-16px text-#333333" :class="{ 'text-white': item.value === type }">
        {{ item.name }}
      </h2>
    </div>
  </div>
</template>
<script setup>
import { useVModel } from '@vueuse/core'
const props = defineProps(['type'])
const emits = defineEmits(['update:type'])
const type = useVModel(props, 'type', emits)
const tagList = [
  {
    name: '我的',
    value: 'my',
    iconName: 'my'
  },
  {
    name: '热门',
    value: 'hot',
    iconName: 'hot'
  },
  {
    name: '关注',
    value: 'follow',
    iconName: 'follow1'
  }
]
const handleImage = (iconName) => {
  const url = new URL(`../../../assets/${iconName}.png`, import.meta.url)
  return url
}
const handleClick = (value) => {
  type.value = value
}
</script>
<style lang="less" scoped></style>
